<template>
    <div class="home com-class">
        <div class="left-div">
            <div class="container left-1">
                <p class="title">在册危房</p>
                <div class="row-1">
                    <div class="item item-1">
                        <p class="row-1"><span number class="font-color-orange" >12000</span>栋</p>
                        <p>房屋鉴定</p>
                    </div>
                    <div class="item item-2">
                        <p class="row-1"><span number class="font-color-red" >2000</span>栋</p>
                        <p>危险房屋通知书</p>
                    </div>
                    <div class="item item-3">
                        <p class="row-1"><span number class="font-color-greed" >600</span>栋</p>
                        <p>解危房屋</p>
                    </div>
                </div>
                <div class="echart-left-1" ref="echartLeft1"></div>

            </div>
            <div class="container left-2">
                <p class="title">到期房屋</p>
                <div class="row-1 row-1-1">
                    <p>到期房屋</p>
                    <p><span class="font-color-greed">1200</span>栋</p>
                </div>
                <div class="row-1 row-1-2">
                    <p>告知通知书</p>
                    <p><span class="font-color-greed">1500</span>栋</p>
                </div>
                <div class="row">
                    <p class="describe">使用类型</p>
                    <div class="item">
                        <a class="common-img zhuzhai"></a>
                        <div class="item-right">
                            <p top><span class="font-color-greed">1000</span>栋</p>
                            <p bottom>住宅</p>
                        </div>
                    </div>
                    <div class="item">
                        <a class="common-img feizhuzhai"></a>
                        <div class="item-right">
                            <p top><span class="font-color-greed">2000</span>栋</p>
                            <p bottom>非住宅</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <p class="describe">建筑结构</p>
                    <div class="item">
                        <a class="common-img zhuanmu"></a>
                        <div class="item-right">
                            <p top><span class="font-color-greed">400</span>栋</p>
                            <p bottom>砖木</p>
                        </div>
                    </div>
                    <div class="item">
                        <a class="common-img hunhe"></a>
                        <div class="item-right">
                            <p top><span class="font-color-greed">300</span>栋</p>
                            <p bottom>混合</p>
                        </div>
                    </div>
                    <div class="item">
                        <a class="common-img kuangjia"></a>
                        <div class="item-right">
                            <p top><span class="font-color-greed">200</span>栋</p>
                            <p bottom>框架</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>


        <div class="center-div">
            <!-- <BaseMap v-if="mapShow" area-code="000000" area-type="country" show-type="home" @changeMapArea="changeMapArea"></BaseMap> -->
            <BaseMap v-if="mapShow" show-type="constructionSafety" :area-code="$local.getAreaCode()" :area-type="$local.getAreaType()" @changeMapArea="changeMapArea"></BaseMap>
        </div>


        <div class="right-div">
            <div class="container right-1">
                <p class="title">工程情况</p>
                <div class="item">
                    <p class="describle">工程总数</p>
                    <div class="color c-1"></div>
                    <p class="count">
                        <span number c-1>2400</span>&nbsp;个
                    </p>
                </div>
                <div class="item">
                    <p class="describle">在建工程</p>
                    <div class="color c-2"></div>
                    <p class="count">
                        <span number c-2>1200</span>&nbsp;个
                    </p>
                </div>
                <div class="item">
                    <p class="describle">完工待验收工程</p>
                    <div class="color c-3"></div>
                    <p class="count">
                        <span number c-3>1300</span>&nbsp;个
                    </p>
                </div>
                <p class="title">工程类型</p>
                <div class="item-2 item-2-1">
                    <p class="sup"><span number class="font-color-orange font-bold">1234</span>&nbsp;个</p>
                    <p class="sub">房屋建筑工程</p>
                </div>
                <div class="item-2 item-2-2">
                    <p class="sup"><span number class="font-color-orange font-bold">56</span>&nbsp;个</p>
                    <p class="sub">其他</p>
                </div>

            </div>
            <div class="container right-2">
                <p class="title">工程日常监督检查情况</p>
                <div class="item item-1">
                    <p class="sup"><span number class="font-color-blue font-bold">1234</span>&nbsp;人</p>
                    <p class="sub">监督检查人次</p>
                </div>
                <div class="item item-2">
                    <p class="sup"><span number class="font-color-blue font-bold">5678</span>&nbsp;份</p>
                    <p class="sub">整改通知份数</p>
                </div>
                <div class="item item-3">
                    <p class="sup"><span number class="font-color-blue font-bold">1256</span>&nbsp;份</p>
                    <p class="sub">整改回复份数</p>
                </div>
                <p class="title" style="padding-top: 0.04rem;">工程重大危险源</p>
                <div class="item item-4">
                    <p class="sup"><span number class="font-color-red font-bold">1234</span>&nbsp;人</p>
                    <p class="sub">深基坑</p>
                </div>
                <div class="item item-5">
                    <p class="sup"><span number class="font-color-red font-bold">5678</span>&nbsp;份</p>
                    <p class="sub">高支模</p>
                </div>
                <div class="item item-6">
                    <p class="sup"><span number class="font-color-red font-bold">1256</span>&nbsp;份</p>
                    <p class="sub">起重机设备</p>
                </div>

            </div>
            <div class="container right-3">
                <p class="title">工程质量情况</p>
                <div class="content c-1">
                    <p sup><span number class="font-color-orange">1000.77</span>万立方</p>
                    <p sub>住建工地浇筑量</p>
                </div>
                <div class="content c-2">
                    <p sup><span number class='font-color-red'>2345.7</span>万立方</p>
                    <p sub>混凝土生产量</p>
                </div>
                <div class="content c-3">
                    <p sup><span number class="font-color-greed">50000</span>万立方</p>
                    <p sub>检测报告</p>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import BaseMap from '../../../../components/BaseMap/BaseMap'
    export default {
        name: "tufashijian",
        data() {
            return {
                mapShow: true,
                echartDataLeft1: [7,2,4],
                echartDataRight1: [17000,12000,14000,13000],
                echartOptionLeft1: {},
                echartObjLeft1: {},

            }
        },
        created() {
            let self = this;
            this.echartOptionLeft1 = {
                color: new self.$echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#FFCF09'},
                                {offset: 1, color: '#E18401'}
                            ]
                        ),
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['A级', 'B级', 'C级', 'D级'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisTick:{show:false}
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        show:false
                    }
                ],  
                series: [
                    {
                        name: '统计信息',
                        type: 'bar',
                        barWidth: '37%',
                        data: [1000, 5200, 2000, 3034],
                        label:{
                            show:true,
                            position:'top',
                            rich:{
                                
                            },
                            formatter:function(p){
                                return '{a|'+p.value+' 栋}'
                            },
                            fontSize: 17,
                            color:'#FFCF09',
                            fontWeight:'bold'
                            
                        },
                        
                        
                    }
                ]
            }
        },
        methods: {
            //地图区域发生变化
            changeMapArea() {
                //重新渲染地图组件
                this.reloadMap();
                //todo: 修改各个区域的数据
            },
            //强制重新渲染地图
            reloadMap() {
                // 移除组件
                this.mapShow = false;
                // 在组件移除后，重新渲染组件
                // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
                this.$nextTick(() => {
                    this.mapShow = true;
                })
            },
            initEcharts(container, option) {
                let e = this.$echarts.init(container);
                e.setOption(option);
                return e;
            },
        },
        mounted() {
            this.echartObjLeft1 = this.initEcharts(this.$refs.echartLeft1, this.echartOptionLeft1);
        },
        components: {
            BaseMap,
        },
    }
</script>

<style scoped lang="less">
    .el-select-dropdown__item{
        text-align: center;
    }
    .el-select-dropdown__item.selected {
        font-weight: normal;
        background: #faf0e4;
        color: @font_color;
    }
    .home {
        height: 100%;
        width: 100%;
        padding: 0;
        color: @font_color;

        .left-div{
            position: absolute;
            margin: .015rem 0 .015rem .015rem;
            width: calc(30% - .015rem);
            height: calc(100% - .03rem);
            left: 0%;
            div.container {
                box-sizing: border-box;
                padding: 0.02rem;
                background: @color3;
                p.title {
                    height: 0.026rem;
                    line-height: 0.026rem;
                    font-weight: bold;
                    font-size: 0.02rem;
                    padding-bottom: 0.015rem;
                }
                
            }
            div.left-1 {
                height: calc( (100% - 0.02rem) * 0.6);
                margin-bottom: 0.02rem;
                div.row-1 {
                    height: calc((100% - 0.041rem)*0.25);
                    div.item {
                        display: inline-block;
                        width: calc((100% - 0.002rem)/3);
                        height: 100%;
                        font-weight: bold;
                        text-align: center;
                        font-size: 0.017rem;
                        color: @color8;
                        p.row-1 {
                            padding-bottom: 0.012rem;
                            span[number] {
                                font-size: 0.035rem;
                                padding-right: 0.005rem;
                            }
                        }
                    }
                    div.item-1,div.item-2 {
                        border-right: 1px @color6 dashed;
                    }
                }
                div.echart-left-1 {
                    height: calc((100% - 0.041rem)*0.75);
                }
            }
            div.left-2 {
                height: calc( (100% - 0.02rem) * 0.4);
                .row-1 {
                    width: 30%;
                    height: 0.1rem;
                    display: inline-flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    background-color: @color9;
                    border-radius: 0.01rem 0.01rem 0.01rem 0.01rem;
                    font-size: 0.017rem;
                    font-weight: bold;
                    span[class*='font-color'] {
                        font-size: 0.02rem;
                        letter-spacing: 0.001rem;
                    }
                    p:nth-of-type(1) {
                        padding-bottom: 0.004rem;
                    }
                }
                .row-1-1 {
                    margin: 0 5% 0 15%; 
                }
                .row-1-2 {
                    margin: 0 15% 0 5%; 
                }
                div.row {
                    font-size: 0.017rem;
                    height: calc((100% - 141px)/2);
                    padding-top: 0.015rem;
                    box-sizing: border-box;
                    p.describe {
                        font-weight: bold;
                        display: inline-block;
                        padding-right: 0.045rem;
                    }

                    

                    div.item {
                        display: inline-block;
                        width: 25%;
                        height: 100%;
                        a {
                            width: 0.044rem;
                            height: 0.044rem;
                        }
                        div.item-right {
                            display: inline-block;
                            vertical-align: middle;
                        }
                        span[class*='font-color-greed'] {
                            letter-spacing: 0.001rem;
                        }
                        p[bottom] {
                            text-align: center;
                            letter-spacing: 0.001rem;
                        }
                        .common-img{
                            width: .04rem;
                            height: .04rem;
                            display: inline-block;
                            vertical-align: middle;
                        }
                        .zhuzhai {
                            background: url('../../../../assets/images/foot/住宅.png') no-repeat center;
                        }
                        .feizhuzhai {
                            background: url('../../../../assets/images/foot/非住宅.png') no-repeat center;
                        }
                        .hunhe {
                            background: url('../../../../assets/images/foot/混合.png') no-repeat center;
                        }
                        .kuangjia {
                            background: url('../../../../assets/images/foot/框架.png') no-repeat center;
                        }
                        .zhuanmu {
                            background: url('../../../../assets/images/foot/砖木.png') no-repeat center;
                        }
                    }
                }
            }
        }

        .center-div{
            position: absolute;
            margin: .015rem;
            width: calc(40% - .03rem);
            height: calc(100% - .03rem);
            left: 30%;
            background: #ffffff;
        }

        .right-div{
            position: absolute;
            margin: .015rem .015rem .015rem 0;
            width: calc(30% - .015rem);
            height: calc(100% - .03rem);
            right: 0%;

            div.container {
                box-sizing: border-box;
                padding: 0.02rem;
                background: @color3;
                p.title {
                    height: 0.026rem;
                    line-height: 0.026rem;
                    font-weight: bold;
                    font-size: 0.02rem;
                    padding-bottom: 0.015rem;
                }
            }
            div.right-1 {
                height: calc((100% - 0.04rem)*0.36);
                margin-bottom: 0.02rem;
                div.item {
                    font-size: 0.017rem;
                    margin-bottom: 0.015rem;
                    height: 0.023rem;
                    p.describle {
                        display: inline-block;
                        padding-left: 0.01rem;
                        box-sizing: border-box;
                        width: 25%;
                        height: 0.023rem;
                        line-height: 0.023rem;
                    }
                    div.color {
                        display: inline-block;
                        border-radius: 0.028rem 0.028rem 0.028rem 0.028rem;
                        vertical-align: middle;
                        height: 0.02rem;
                        width: 52%;
                        margin-left: 3%;
                    }
                    div.c-1 {
                        background-image: linear-gradient(to right, #E39D47 , #F8D700);
                    }
                    div.c-2 {
                        background-image: linear-gradient(to right, #83B99F , #DFECE5);
                    }
                    div.c-3 {
                        background-image: linear-gradient(to right, #33BCFF , #99D8F7);
                    }
                    p.count {
                        display: inline-block;
                        width: 20%;
                        text-align: center;
                        height: 0.023rem;
                        line-height: 0.023rem;
                        span[number] {
                            letter-spacing: 0.001rem;
                            font-weight: bold;
                        }
                        span[c-1] {
                            color: @font_color6;
                        }
                        span[c-2] {
                            color: @color10;
                        }
                        span[c-3] {
                            color: @font_color4;
                        }
                    }

                }
                div.item-2 {
                    display: inline-block;
                    height: calc(100% - 41px*2 - 38px*3);
                    font-size: 0.017rem;
                    text-align: center;
                    p.sup {
                        padding-bottom: 0.006rem;
                        span[number] {
                            letter-spacing: 0.001rem;
                        }
                    }
                    p.sub {
                        font-weight: bold;
                        letter-spacing: 0.001rem;
                    }
                }
                div.item-2-1 {
                    width: 30%;
                }
                div.item-2-2 {
                    width: 15%;
                }

            }
            div.right-2 {
                height: calc((100% - 0.04rem)*0.38);
                margin-bottom: 0.02rem;
                div.item {
                    display: inline-block;
                    height: calc(100% - 41px*2 - 38px*3);
                    font-size: 0.017rem;
                    text-align: center;
                    width: calc(100% / 3);
                    box-sizing: border-box;
                    padding-top: 0.01rem;
                    p.sup {
                        padding-bottom: 0.006rem;
                        span[number] {
                            letter-spacing: 0.001rem;
                        }
                    }
                    p.sub {
                        font-weight: bold;
                        letter-spacing: 0.001rem;
                    }
                }
                div.item-1 {
                }
                div.item-2 {
                }
                div.item-3 {
                }

            }
            div.right-3 {
                height: calc((100% - 0.04rem)*0.26);
                div.content {
                    margin: 0.005rem;
                    display: inline-block;
                    font-size: 0.017rem;
                    text-align: center;
                    width: calc((100% - 0.03rem)/3);
                    border-radius: 0.008rem 0.008rem 0.008rem 0.008rem;
                    height: calc((100% - 0.041rem)*0.77);
                    background-color: @color9;
                    color: @color8;
                    p[sup] {
                        padding-top: 0.02rem;
                        span[number] {
                            font-size: 0.02rem;
                            font-weight: bold;
                        }
                    }
                    p[sub] {
                        padding-top: 0.01rem;
                    }
                }
            }
        }
    }
</style>